<template>
  <div id="home_head">
    <div class="head_title">
      5426图书商城
    </div>
    <div class="head_search">
      <input type="text" placeholder="请输入搜索内容">
      <span class="iconfont">&#xe86e;</span>
    </div>
    <div class="head_user">
      <img :src="imgUrl?imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.3dEvA4aEcT2P79gRTAftnwHaHa?pid=ImgDet&rs=1'"
      @click="$router.push('/persondetail')">
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHead",
  data(){
    return{
      imgUrl:"",
    }
  },
  created() {
    console.log(sessionStorage.getItem("wlj-user-image"));
  }
}
</script>

<style scoped>
#home_head{
  display: flex;
  height: 80px;
  justify-content: space-between;
}
.head_title{
  font-size: 50px;
  color: orangered;
  font-weight: bolder;
  font-family: 苏新诗柳楷简;
}
.head_search{
  position: relative;
  width: 50%;
  overflow: hidden;
}
.head_search input{
  position: relative;
  outline: linen;
  border: 2px solid chocolate;
  padding-left: 10px;
  font-size: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  line-height: 45px;
  padding-right: 50px;
}
.head_search span{
  position: absolute;
  right: 0;
  font-size: 40px;
  cursor: default;
  top: 50%;
  transform: translateY(-50%);
  color: chocolate;
}
.head_user img{
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
}
</style>
